<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的生命周期</title>
    <script src="../js/vue.js"></script>
</head>
</head>
<body>
<div id="app">{{message}}</div>

<script>
    let v=new Vue({
        el:"#app",
        data:{
            message:'hello pig'
        },
        beforeCreate:function () {
            console.log(this);
            showData('创建vue实例钱',this);
        },
        created:function () {
            showData('创建vue实例后',this);
        },
        beforeMount:function () {
            showData('挂载到dom钱',this);
        },
        mounted:function () {
            showData('挂载到dom后',this);
        },
        beforeUpdate:function () {
            showData('数据变化更新前',this);
        },
        updated:function () {
            showData('数据变化更新后',this);
        },
        beforeDestroy:function () {
            showData('vue实例销毁钱',this);
        },
        destroyed:function () {
            showData('vue实例销毁后',this);
        }
    });
    function showData(process,obj){
        console.log(process);
        console.log('data数据:'+obj.message);
        console.log('挂载的对象:');
        console.log(obj.$el);
        console.log('真实dom结构:'+document.getElementById('app').innerHtml);
        console.log('--------------------');
    }
    v.message='update Data....';
    // v.$destroy();
</script>
</body>
</html>